<template>
  <view class=''>
	<view class="top-background">
		<view class="background-title">
			<view class="title-left">
				<image class="address-icon" src="../../static/chooseShop/dingwei.png"></image>
				<view class="text" style="margin-left: 3px;">{{address}}</view>
<!--				<image class="arrow" src="../../static/chooseShop/jiantou-xia-bai.png"></image>-->
			</view>
<!--			<view class="title-right">-->
<!--				<image src="../../static/chooseShop/sousuo.png"></image>-->
<!--				<image class="address-icon" src="../../static/chooseShop/message.png"></image>-->
<!--			</view>-->
<!--			<view class="content">-->
<!--				<view class="title">-->
<!--					<text>某某小区点</text>-->
<!--					<image style="margin-left: 5px;" class="address-icon" src="../../static/chooseShop/jiantou-xia.png"></image>-->
<!--				</view>-->
<!--				<view class="desc">深圳宝安.....200m</view>-->
<!--			</view>-->
		</view>
	</view>
	<view class="currnet-shop">
		<view class="title">附近商城</view>
		<view class="shop-item" v-for="item in storeList" @click="selectDist(item.name)">
			<view class="item-left">
				<image v-if="item.thumb_url" :src="item.thumb_url" mode="aspectFill"></image>
				<view class="item-left-detail">
					<view class="item-name">{{item.name}}</view>
					<view class="buy-count">{{item.province[2]=='市'?item.province:item.province+item.city}}{{item.area}}{{item.address}}</view>
					<view class="start-time">
						<text>营业时间</text>
						<text style="margin-left: 8px;">每日10:00-19:00</text>
					</view>
					<view style="font-size: 11px; color: #F77A3D;">价格实惠</view>
				</view>
			</view>
			<view class="item-right">{{item.distance}}</view>
		</view>
	</view>
  </view>
</template>

<script>
  export default{
    name:'chooseShop',
    data(){
      return {
		  latitude:0,
		  longitude:0,
		  address:"请获取当前定位地址！",
		  storeList: [],
		  page:0,
		  limit:10
      }
    },
    methods:{
      //获取
      // async getAboutUs() {
      //   let res = await this.$api.getAboutUs()
      //   if (res.data.level == 'success') {
      //
      //   } else {
      //     // this.$currency.showToast(res.data.message, 'none', 1500)
      //   }
      // },
		getLocation(){
			let _this = this
			uni.getLocation({
				type: 'gcj02',

				success (res) {
					console.log(res);
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					_this.getLocationInfo();
					uni.setStorageSync('shop_dist',_this.latitude + "," + _this.longitude);
				},
				fail (res){
				},
				complete(){
					_this.getShopList();
				}
			})
		},
		async getLocationInfo(){
			let res=await this.$api.getLocationInfos({
				location: this.latitude + "," + this.longitude,
				key: "THNBZ-EIYCQ-CZB5B-G5SZG-DQFWV-4GBYY"
			});
			if(res.data.status== 0){
				this.address = res.data.result.address;
				uni.setStorageSync('user_address',this.address);
			} else{
				uni.showToast({
					title: res.data.message,
					duration: 1500
				})
			}
		},
		//获取门店列表
		async getShopList(){
			let params = {
				page: this.page,
				limit: this.limit
			}
			const res = await this.$api.getShopList(params);
			if (res.data.level == 'success'){
				this.storeList = res.data.data;
				this.totalPage = res.data.page_info.total;
				for (let i=0;i<this.storeList.length; i++){
					this.storeList[i].distance = this.getDistance(this.storeList[i].lat,this.storeList[i].lng);
					if (this.storeList[i].distance>1000) {
						this.storeList[i].distance = (this.storeList[i].distance/1000).toFixed(2) + "km";
					}else {
						this.storeList[i].distance = this.storeList[i].distance.toFixed(2) + "m";
					}
				}
			}
		},
		getDistance(lat,lng){
			lat = lat || 0;
			lng = lng || 0;
			this.latitude = this.latitude || 0;
			this.longitude = this.longitude || 0;
			var rad1 = lat * Math.PI / 180.0;
			var rad2 = this.latitude * Math.PI / 180.0;
			var a = rad1 - rad2;
			var b = lng * Math.PI / 180.0 - this.longitude * Math.PI / 180.0;
			var r = 6378137;
			return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))
		},
		selectDist(name){
			uni.setStorageSync('shop_name',name);
			uni.navigateBack({
				delta: 1
			})
		}
    },
	mounted(){

	},
    onShow(){
      	this.getLocation();
    }
  }
</script>

<style lang="scss" scoped>
	.top-background{
		width: 100vw;
		height: 50px;
		background-color: #f64949;
		/*background-size: 100% auto;*/
		/*background-repeat: no-repeat;*/
		position: relative;
		.background-title{
			padding-top: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title-left{
				width: 250px;
				display: flex;
				align-items: center;
				.address-icon{
					width: 17px;
					height: 19px;
					margin: 0 10px;
				}
				.text{
					max-width: 180px;
					color: #fff;
					font-size: 15px;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.arrow{
					width: 12px;
					height: 7px;
					margin-left: 8px;
				}
			}
			.title-right{
				display: flex;
				align-items: center;
				image{
					width: 20px;
					height: 20px;
				}
				.address-icon{
					margin: 0 15px;
				}
			}
		}
		.content{
			position: absolute;
			background-color: #FFFFFF;
			border-radius: 15px;
			bottom: -15px;
			left: 50%;
			transform: translateX(-50%);
			max-width: 160px;
			padding: 8px 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 10px;
				height: 6px;
			}
			.title{
				display: flex;
				align-items: center;
				text{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
			.desc{
				font-size: 12px;
				color: #9EA09F;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-top: 5px;
			}
		}
	}
	.currnet-shop{
		.title{
			font-size: 17px;
			font-weight: bold;
			padding: 15px;
		}
		.shop-item{
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1rpx solid #EEEEEE;
			.item-left{
				width: 78vw;
				display: flex;
				align-items: center;
				image{
					width: 80px;
					height: 80px;
					margin: 0 10px;
				}
				.item-left-detail{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 80px;
					.name{
						color: #2B2B2B;
						font-size: 13px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.buy-count,.start-time{
						font-size: 11px;
						color: #A7A9A8;
					}
					.item-name{
						display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
					}
				}
			}
			.item-right{
				width: 22vw;
				font-size: 13px;
				color: #9C9D9D;
				text-align: center;
			}
		}
		.shop-item:last-child{
			border: none;
		}
		
	}
</style>
